<template>
  <el-row :gutter="10">
    <el-col v-if="indexData.fwsph" :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{userInfo.user_type == 2 ? '服务商排行' : '供应商排行'}}</span>
        </div>
        <div class="box">
          <div
            class="box-item"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="box-item-name">{{item.supplier_name}}</div>
            <div class="fl">{{index + 1}}</div>
            <el-progress
              class="progress fl"
              :show-text="false"
              :stroke-width="22"
              :percentage="item.ratio"
              :color="colors[index]"
            />
            <div class="fr box-item-num">{{item.res}}场</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col v-if="indexData.fktjbb" :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>付款统计报表</span>
        </div>
        <div>
          <v-chart ref="fktjbb" class="chart" :option="option"/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  import {mapGetters} from 'vuex'
  import { getStaticUserInfo } from '@/utils/user'

  export default {
    props: {
      indexData: {
        type: Object,
        default: function () {
          return {}
        }
      },
    },
    data() {
      return {
        userInfo: getStaticUserInfo(),
        colors: [
          '#358CFD',
          '#1CCD85',
          '#FFA820'
        ],
        list: null,
        option: {
          title: {
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            top: '30%',
            right: '20%',
            data: [],
          },
          series: [
            {
              name: '统计',
              label: {
                show: false,
                position: 'center'
              },
              type: 'pie',
              radius: ['40%', '80%'],
              center: ['20%', '50%'],
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        },
      }
    },
    watch: {
      indexData: {
        deep: true,
        handler: function (newVal) {
          this.list = newVal.fwsph
          if(newVal.fktjbb) {
            let name = newVal.fktjbb.map(val => {
              return `${val.name}`
            })
            this.option.series[0].data = newVal.fktjbb
            this.option.legend.data = name
            this.option.formatter = (name) => {
              let data = newVal.fktjbb;
              let total = 0;
              let tarValue;
              for (let i = 0; i < data.length; i++) {
                total += data[i].value;
                if (data[i].name == name) {
                  tarValue = data[i].value;
                }
              }
              let v = tarValue;
              let p = Math.round(((tarValue / total) * 100));
              return `${name}  ${v}元`;
            }
            this.$nextTick(() => {
              this.$refs.fktjbb.setOption(this.option)
            })
          }
        }
      }
    },
    methods: {
      handleTips() {

      },
    },
  }
</script>

<style lang="scss" scoped>
  p {
    margin: 0;
  }

  ul {
    margin: 0;
  }

  li {
    overflow: hidden;
    list-style: none; /*去掉小圆点*/
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .msg {
    box-sizing: border-box;
    padding: 0 20px;

    &-item {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #EEEEEE;

      &-title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
      }

      &-btn {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #358CFD;
      }
    }
  }


  .box-card {
    height: 279px;
    padding: 0 !important;
  }

  .box {

    &-item {
      height: 70px;

      &-name {
        margin-left: 40px;
        margin-bottom: 10px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
      }

      &-num {
        position: relative;
        top: 4px;
        color: #666666;
      }

      &-top {
        position: relative;
        top: 10px;
      }

      .progress {
        margin-left: 20px;
        width: 85%;
      }
    }

    &-item:nth-child(1) {
      color: #358CFD;
    }

    &-item:nth-child(2) {
      color: #1CCD85;
    }

    &-item:nth-child(3) {
      color: #FFA820;
    }
  }

  .chart {
    height: 180px !important;
  }

  .page-header {
    min-height: 145px;
    transition: $base-transition;


    .btn {
      width: 90%;
      height: 185px;
      padding-left: 20px;

      font-size: 20px;
      color: #fff;
      background-color: red;
      border-radius: 25px;

      &-title {
        margin-top: 20px;
      }
    }

    ::v-deep {
      * {
        transition: $base-transition;
      }

      .el-card__body {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
    }

    &-avatar {
      width: 60px;
      height: 60px;
      margin-right: 20px;
      border-radius: 50%;
    }

    &-tip {
      flex: auto;
      width: calc(100% - 200px);
      min-width: 300px;

      &-title {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: bold;
        color: #3c4a54;
      }

      &-description {
        font-size: $base-font-size-default;
        color: #808695;
      }
    }

    &-avatar-list {
      flex: 1;
      min-width: 100px;
      margin-left: 20px;
      text-align: right;

      p {
        margin-right: 9px;
        line-height: 0px;
      }
    }
  }
</style>
